import React, { Component } from 'react'
import "./Regist.css";
import { Redirect } from 'react-router-dom';

import Logo from "../../components/logo/Logo";
import { List, InputItem, WhiteSpace, WingBlank, Button, Radio} from 'antd-mobile';

// 使用redux要用connect将redux中的state和fn映射到此组件的props上
import { connect } from "react-redux";
// redux中的方法regist 用connect关联 到Regist组件 
import { regist } from '../../redux/reducers/user.reducer.js';

class Regist extends Component {
    constructor(props){
        super(props);
        // bind 性能好；()=>{} 代码少，可以传参
        this.registClick = this.registClick.bind(this);
        this.state = {
            name:'',
            password:'',
            repeatpassword:'',
            type:'jobhunter',
            // type:'jobhunter'
        }
    }

    onChange = (key,val) => {
        this.setState({
            [key]:val
        });
    };

    registClick(){
        this.props.regist(this.state);
        console.log(this.props.userReducer)
    }

    render() {
        const roles = [
            { type: 'jobhunter', label: '求职', extra: 'details' },
            { type: 'boss', label: '老板', extra: 'details' },
        ]
        return (
            <div>
                {this.props.userReducer.redirectPath?<Redirect to={this.props.userReducer.redirectPath}></Redirect>:null}
                <Logo></Logo>
                {/* { this.props.userReducer.msg?<NoticeBar mode="closable" icon={<Icon type="check-circle-o" size="xxs" />}>
                    {this.props.userReducer.msg}
                   </NoticeBar>:''
                } */}
                { this.props.userReducer.msg?
                    <p className="msg">{this.props.userReducer.msg} !</p>
                     : ''
                }
                <WingBlank>
                    <List className="input_box">
                        <InputItem onChange={(val) => this.onChange('name',val)}>用户</InputItem>
                        <WhiteSpace></WhiteSpace>
                        <InputItem type="password" onChange={(val) => this.onChange('password',val)}>密码</InputItem>
                        <WhiteSpace></WhiteSpace>
                        <InputItem type="password" onChange={(val) => this.onChange('repeatpassword',val)}>确认密码</InputItem>
                        {/* <List renderHeader={() => 'RadioItem demo'}>  单选框标题*/}
                            {roles.map(i => (
                            <Radio.RadioItem key={i.type} checked={this.state.type === i.type} onChange={() => this.onChange('type',i.type)}>
                                {i.label}
                            </Radio.RadioItem>
                            ))}
                        
                        {/* <Radio.RadioItem checked={this.state.type==='jobhunter'} onChange={() => this.onChange('type','jobhunter')}>
                            求职
                        </Radio.RadioItem>
                        <Radio.RadioItem checked={this.state.type==='boss'} onChange={() => this.onChange('type','boss')}>
                            老板
                        </Radio.RadioItem> */}
                    </List>
                    <WhiteSpace/>
                    <Button type="primary" onClick={this.registClick}>注 册</Button>
                </WingBlank>
            </div>
        )
    }
}

export default connect(
    state => state,
    { regist }
)(Regist)
